<template>
    <div>
        <div class="top">
            <img src="@/assets/logo.svg" alt="">
            <!-- <el-breadcrumb separator="/" class="way-top" v-for="item in data[0].ListChild[0].ListChild " :key="item">
                <el-breadcrumb-item>{{ item.ShowText }}</el-breadcrumb-item>
                <el-breadcrumb-item>文章管理 </el-breadcrumb-item>
                <el-breadcrumb-item>课外拓展 </el-breadcrumb-item>
            </el-breadcrumb> -->
            <div class="login" @click="loginDelete"> 退出</div>
        </div>
        <div class="main">
            <div class="main_nav">
                <div class="navTitle">System Admin</div>
                <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" class="mainsss" />
            </div>
            <div class="content">
                <router-view :key="keyName">
                </router-view>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
import { getColumnList } from '@/api/SystemMgt.js'
import { ElMessage } from 'element-plus'

let { proxy } = getCurrentInstance();
let keyName = ref()
// 编程式路由跳转页面
function handleNodeClick(data) {
    // console.log(data);
    window.sessionStorage.setItem('datas', JSON.stringify(data))
    //判断该对象是否含有这个对象，有就true,没有就false
    if (proxy.$HelperCore.boolFuncJsonExistChk(data.HyperLinkConfig, "HomeSystemMgt")) {
        //判断是否有权限查看
        if (data.Privilege[2] === 2) {
            // console.log(data.NumDataGroup);
            keyName.value = data.NumDataGroup
            proxy.$router.push({ path: data.HyperLinkConfig.HomeSystemMgt.URL })
        } else {
            ElMessage({
                showClose: true,
                message: '你没有权限查看',
                type: 'error',
            })
        }
    } else {
        proxy.$router.push({ path: "/LayoutViewSystemMgt" })
    }
}
// 获取左侧栏目列表数据
//请求参数
let data = ref([])
function ColumnList() {
    //调封装好的接口函数获取数据
    getColumnList().then((res) => {
        data.value = res.Payload
        // console.log(data.value[0].ListChild[0].ListChild);
    })
}
const defaultProps = {
    label: 'ShowText',
    children: 'ListChild',
}
onMounted(() => {
    ColumnList()
})
// console.log(data.value);
// 退出登录
function loginDelete() {
    proxy.$router.push({
        path: "/LayoutViewUserAccount/VerfyUserWebCmd"
    })
    window.localStorage.removeItem("AccessToken")
}
</script>

<style scoped>
.top {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    /* line-height: 50px; */
}

/* .way-top {
    line-height: 50px;
    background-color: aqua;
    margin-right: 1400px;
} */

.top img {
    margin-top: 5px;
    padding-left: 20px;
    width: 50px;
    height: 50px;
}

.top .login {
    line-height: 50px;
    margin-right: 40px;
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.main {
    display: flex;
}

.content {
    flex-grow: 1;
}

.main .main_nav {
    width: 200px;
}

.navTitle {
    font-weight: bolder;
    line-height: 50px;
    text-align: center;
    background-color: rgb(242, 243, 243);
}

/* 修改element-Plus样式 */
:deep(.el-tree-node__content) {
    padding: 15px 0;
}

:deep(.el-tree-node__expand-icon) {
    position: absolute;
    right: 0;
    transform: rotate(180deg);
    transition: transform var(--el-transition-duration) ease-in-out;
}

:deep(.el-tree-node__expand-icon.expanded) {
    transform: rotate(90deg);
}

a.router-link-exact-active {
    background-color: white;
}

.mainsss {
    height: 830px;
    background-color: rgb(242, 243, 243);
}

/* 修改element-Plus样式 结束 */
</style>
